<template>
  <div>
    <div class="top">
      <HomeHeader title="猫眼电影" />
      <HomeLogo />
      <HomeNav />
    </div>
    <!-- <HomeList /> -->
    <div class="fixed">
      <!-- 可以通过$route.meta去拿到路由表里面写的元信息 -->
      <!-- 通过元信息来控制某个组件不要被缓存 -->
      <!-- 缓存组件 -->
      <keep-alive>
        <router-view v-if="$route.meta.requireAlive" />
      </keep-alive>
      <router-view v-if="!$route.meta.requireAlive"></router-view>

      <!-- <transition name="fade" mode="out-in">
        <router-view />
      </transition> -->
    </div>
  </div>
</template>

<script>
// .vue后缀是可以省略的
// 可以使用@符表示绝对路径src
import HomeHeader from "@/views/home/movies/components/HomeHeader";
import HomeLogo from "@/views/home/movies/components/HomeLogo";
import HomeNav from "@/views/home/movies/components/HomeNav";
// import HomeList from "@/views/home/movies/components/HomeList";

export default {
  components: {
    HomeHeader,
    HomeLogo,
    HomeNav,
    // HomeList,
  },
};
</script>

<style>
.top {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
}

.fixed {
  position: fixed;
  top: 154px;
  bottom: 50px;
  left: 0;
  right: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s;
}
.fade-enter {
  transform: translateX(30px);
  opacity: 0;
}
.fade-leave-to {
  transform: translateX(-30px);
  opacity: 0;
}
</style>
